Carl

Hello and welcome to the forums This is by no means a beginner effect or even something that would fall into the general capabilities of GSAP. However, you could start with this code and perhaps make some modifications Click and drag: https://codepen.io/PavelDoGreat/pen/zdWzEL

Hi, It's not really clear to me which part of the animation you have trouble with: the line morph, highlighting the path, moving the highlight segment etc... Regardless, it's a pretty neat effect. With GSAP's available tools it's all possible. Here is a demo with enough code to get you started: https://codepen.io/snorkltv/pen/WNBVmwB?editors=0010 The reference site uses a masked path but I'm not sure how much of that site you intend to copy. I copied the exact stroke d attributes from the site's source code for this demo.

Hi and welcome to the forums, Great to hear you are enjoying your time with GSAP! There could be a few reasons why this is happening and it is very difficult to troubleshoot without a minimal demo. One common mistake is relying on from() tweens which by design will use different ending values depending on when they are created. This video from my free beginner's course GSAP 3 Express explains the issues in detail When dealing with more complex "enter" and "leave" animations you can very easily run into issues with overwriting With "enter" and "leave" animations it is typically best to call functions that create those animations on demand instead of having pre-made timelines that you try to control as the current state of your enter animation is most likely going to be very different than the start state of your leave animation if the user is trying to trigger them repeatedly in quick succession Hopefully some of this helps, but it would be very helpful to see a minimal demo that clearly illustrates the issue with as little code as possible Thanks!

glad you were able to implement my suggestion. try changing the duration of the first tween to a very small number like duration:0.001 https://codepen.io/snorkltv/pen/MWdXPKN?editors=0010 having a set or 0-duration tween as the first thing in a timeline can be kind of funky

Thanks for the demo. If you don't want your animations to have any animation you can set duration:0 or use a set() Once your animations don't have any duration it is important to space them apart in the timeline by using a position parameter. I'm using index * 0.5 in your loop. Without the position parameter they will all run at the same time. https://codepen.io/snorkltv/pen/JjqZvOj?editors=0110 Hopefully this helps

Yes, unfortunately I don't understand your code very well either and the best I can do is provide you an example of how I think it is best to set it up. My demo provides the bare-minimum of code for this type of effect and it's also fully responsive. I think it would be best for you to fork my demo and add your cards in place of my <h2> tags. I apologize, but I just don't have the time at the moment to try to re-work your project for you.

like this https://codepen.io/snorkltv/pen/xxNzwKY?editors=0010

Hi, Perhaps you can just add a blank card that is same width as the viewport.

Hi Glad to hear you are interested in learning more about GSAP and you're trying things like this. Here is a basic demo from my course ScrollTrigger Express that perhaps may help. https://codepen.io/snorkltv/pen/PoxojaO?editors=0010 Open it in a new window and resize to see that it is fully responsive and that the pinning stops whenever "japan" is visible in the viewport. Also notice that each country name (card) is a different width and it adjusts flawlessly to resize. The course contains loads of videos to help you through these types of common scrolltrigger tasks and many more advanced setups. Hopefully this demo will give you some ideas how to incorporate the code into your project. Carl

I might not be following what you mean about the trigger points. But to handle each section fading in its background when it enters the viewport I think this works pretty well just using onEnter and onLeave https://codepen.io/snorkltv/pen/Jjqpmae?editors=0010

it appears that the scale is set relative to the native size of the images not the width and height that you set in pixi. I haven't used pixi in years so I'm just going off what I see. When loading the images the first image is loaded at 300 x 300 but the rest are 150 by 150 and and it seems to work. If you want to stagger different properties at different rates you need a tween for each property. in the demo below I created a timeline. https://codepen.io/snorkltv/pen/qBGVyYR?editors=0010 Hope this helps. if you're not familiar with timelines I'd strongly recommend my free beginner's course available via the link in my signature.

perhaps an "easier" approach would be to push each sprite into an array and then after the loop runs you can tween every image in that array using a stagger https://codepen.io/snorkltv/pen/xxNPjPY?editors=0010

Thanks for the demo. very cool. The reason your images were animating all at once is because you are creating new tweens at virtually the same during each iteration of the loop. what I did was create a timeline outside the loop and then each images tween gets added to the timeline at a position of (imgNum * 1) https://codepen.io/snorkltv/pen/vYwWjev?editors=1010 EDIT: at one point I had the wrong pen here

Thanks for the demo, it was very helpful. Yes, the tween does reverse to a smaller value but it is also starting at that same value. Set the duration of the tween to 10 and you will see that as soon as you mouseenter the borders will jump to small state and then grow. I believe the main cause for the discrepancy is that your --the-size property is initially set in px but you are tweening to percent. Notice how using % for both yields consistent results https://codepen.io/snorkltv/pen/KKLXZYX?editors=0110 Since the same percent is used for the width and height the starting state will not look the same as in your example. You may need to animate width and height with different values.

Hi, you can specify an endTrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#endTrigger here is a quick example: https://codepen.io/snorkltv/pen/jOoLqNx?editors=0110 if you need something different please provide a minimal demo